<template>
  <div>
    <span>全选:</span>
    <input type="checkbox" v-model="isAll" />
    <button @click="fn">反选</button>
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        <input type="checkbox" v-model="item.c" />
        <span>{{ item.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
// 目标: 小选框 -> 全选
export default {
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          c: false,
        },
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龙马",
          c: false,
        },
      ],
    };
  },
  computed: {
    // isAll() {
			//判断arr数组中每一项是否都为true
    //   return this.arr.every((item) => item.c);
    // },
    // 改写成完整写法
    isAll: {
      get() {
        return this.arr.every((item) => item.c);
      },
      set(val) {
        console.log(val); //val就是修改后的值，就是全选框选中与否的结果(true,false)
				// 需要对arr数组进行遍历，修改每一项c属性的值和全选的值一样
        this.arr.forEach((item) => (item.c = val));
      },
    },
  },

  // 反选
  methods: {
    fn() {
			// 把数组中的每一项的c进行取反，实现反选效果
      this.arr.forEach(item => item.c = !item.c)
    },
  },
};
</script>

<style>
</style>
